<template>
  <div class="grid">
    <van-row gutter="10">
      <van-col span="12"  v-for="(item,index) in products" :key="index">
        <a class="bor" href="javascript:void(0)">
          <span class="p_title">{{item.english}}</span>
          <span class="p_name">{{item.desc}}</span>
          <span class="p_more"></span>
          <img :src="item.imagePath" />
        </a>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name: "grid",
  props: ["products"],
  data() {
    return {

    }
  },
}
</script>
<style lang="scss" scoped>
.grid {
  width: 100%;
  a {
    display: block;
    span {
      display: block;
    }
  }
}

.van-col {
  background-clip: content-box;
}

.bor {
  margin: 5px 0px;
  border: 1px solid #000;
  height: 80px;
  overflow: hidden;
  position: relative;
  .p_title {
    font-size: 15px;
    height: 18px;
    width: 91px;
    overflow: hidden;
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .p_name {
    font-size: 13px;
    position: absolute;
    left: 10px;
    top: 28px;
  }
  .p_more {
    width: 15px;
    height: 15px;
    background: url("../../assets/images/right.png") no-repeat center;
    position: absolute;
    left: 10px;
    bottom: 5px;
  }
  img {
    display: block;
    height: 60px;
    position: absolute;
    right: -5px;
    bottom: 0px;
  }
}
</style>